import {ColumnsType} from "antd/es/table";
import {Space,Badge} from "antd";
import {Link} from "react-router-dom";
import {ellipsisHandler} from "../util/ColumnsUtil";
import {SecurityMenu} from "../type/SecurityMenu";
import InitHandler from "../global/InitHandler";

const IconFont = InitHandler.getInstance().getIconFont() ;

const menuColumns: ColumnsType<SecurityMenu> = [
    {
        dataIndex: 'index',
        title: '序号' ,
        width: 60,
        align: "center" ,
        render: (_, __, index) => <strong>{index + 1}</strong>
    },
    {
        key: 'id',
        dataIndex: 'id' ,
        title: '菜单编号',
        width: 110,
        align: "center" ,
    },
    {
        key: 'label',
        dataIndex: 'label' ,
        title: '菜单标签',
        width: 100,
        align: "center" ,
        render: (value,record) => <Link key={"menu-details"} to={"./details"} state={record}>{value}</Link> ,
    },
    {
        key: 'path',
        dataIndex: 'path' ,
        title: '路径地址',
        width: 150,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        key: 'icon',
        dataIndex: 'icon' ,
        title: '图标',
        width: 60,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: (value) => <IconFont type={value} />
    },
    {
        key: 'last',
        dataIndex: 'last' ,
        title: '子菜单',
        width: 100,
        align: "center" ,
        render: (value) => <Badge status={ value ? "success" : "error"} text={ value ? "Yes" : "No" } />

    },
    {
        key: 'menuOrder',
        dataIndex: 'menuOrder' ,
        title: '菜单排序',
        width: 100,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        key: 'show',
        dataIndex: 'show' ,
        title: '是否显示',
        width: 100,
        align: "center" ,
        render: (value) => <Badge status={ value ? "success" : "error"} text={ value ? "Yes" : "No" } />
    },
    {
        key: 'order',
        dataIndex: 'order' ,
        title: '排序字段',
        width: 100,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        key: 'remark',
        dataIndex: 'remark' ,
        title: '备注信息',
        width: 100,
        align: "center" ,
        ellipsis: {showTitle: false},
        render: ellipsisHandler
    },
    {
        title: '菜单操作',
        dataIndex: 'option' ,
        align: "center",
        width: 100,
        render: (_, record) => {
            return <Space>
                <Link key={"menu-update"} to={"./update/" + record.id}>更新</Link>
                <Link style={{color: '#D12'}} key={"menu-delete"} to={"./delete"} state={record}>删除</Link>
            </Space> ;
        }
    }

] ;
export default menuColumns ;